<template>
  <div v-loading="loading" class="sale-statistics card">
    <flexbox class="card-title">
      <span class="icon wk wk-target" />
      <div class="card-title-center text-one-ellipsis">
        {{ options[value - 4].name || "线索统计" }}
      </div>
      <div class="card-title-right">
        <!--<span class="box">{{ filterText }}</span>
        <span class="box">{{ timeLine }}</span>-->
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
        <div>
          <el-input v-model="input1" placeholder="请输入期数"></el-input>
          <span class="line">&nbsp;-&nbsp;</span>
          <el-input v-model="input2" placeholder="请输入期数"></el-input>
        </div>
        <el-button @click="changeFn" type="primary">查询</el-button>
        <el-button @click="clearData" type="reset">清空</el-button>
      </div>
    </flexbox>
    <div id="customer-statistics" />
  </div>
</template>

<script>
import { crmPeriodsStatisticsDataAPI } from "@/api/crm/workbench";

import echarts from "echarts";
import ChartMixin from "./ChartMixin";
import { mapGetters } from "vuex";

export default {
  name: "ClassStatistics",
  mixins: [ChartMixin],
  props: {},
  data() {
    return {
      radio1: "今日",
      input1: "",
      input2: "",
      //   isShowNper: true,
      //   isShowYear: false,
      value: 4,
      //   value1: 1,
      //   value2: "",
      options: [
        { name: "加好友量", value: 4 },
        { name: "加好友率", value: 5 },
      ],
      optionName: "合同金额",
      optionValue: 4,
      chartOption: {
        tooltip: {},
        legend: {
          data: ["用户来源"],
        },
        animation: false,
        xAxis: {
          type: "category",
          boundaryGap: false, //坐标轴两边不留白
          data: [],
          name: "报课量统计", //X轴 name
          nameTextStyle: {
            //坐标轴名称的文字样式
            color: "#FA6F53",
            fontSize: 16,
            padding: [0, 0, 0, 20],
          },
          axisLine: {
            //坐标轴轴线相关设置。
            lineStyle: {
              color: "#FA6F53",
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "数据源",
            type: "line",
            data: [500, 200, 360, 100],
          },
        ],
      },
      chartObj: null,
      loading: false,
    };
  },
  computed: {
    ...mapGetters(["manage"]),
    // 目标设置权限
    hasSetAuth() {
      return this.manage && this.manage.crm && this.manage.crm.achievement;
    },
  },
  mounted() {
    this.initChart();
    // 获取默认 optionValue 类型的数据
    // this.getData();
  },
  methods: {
    initChart() {
      this.chartObj = echarts.init(
        document.getElementById("customer-statistics")
      );
      this.chartObj.setOption(this.chartOption, true);
    },
    changeFn(e) {
      this.getData();
    },
    clearData() {
      this.input1 = "";
      this.input2 = "";
      //   this.value2 = "";
      //   this.value1 = "";
      this.getData();
    },
    /**
     * 下拉菜单选项选择
     * @param index 选项序号
     */
    handleCommand(index) {
      if (this.optionValue === this.options[index].value) return;
      this.optionName = this.options[index].name;
      this.optionValue = this.options[index].value;
      this.getData();
    },

    getData() {
      this.loading = true;
      crmPeriodsStatisticsDataAPI({
        startPeriods: this.input1,
        endPeriods: this.input2,
        type: this.value,
      })
        .then((res) => {
          console.log("111111111111111111111111111");
          console.log(res);
          this.chartOption.series[0].data = res.data.customerStatistics.values;
          this.chartOption.xAxis.data = res.data.customerStatistics.xAxis;
          // this.chartOption.yAxis.data = res.data.customerStatistics.yAxis;
          this.chartObj.setOption(this.chartOption, true);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    // ShowChange() {
    //   //   console.log(this.value1);
    //   if (this.value1 == 1) {
    //     this.isShowYear = false;
    //     this.value2 = "";
    //     this.isShowNper = true;
    //   } else {
    //     this.isShowNper = false;
    //     this.input1 = "";
    //     this.input2 = "";
    //     this.isShowYear = true;
    //   }
    // },
  },
  watch: {
    //观察option的变化
    chartOption: {
      handler(newVal, oldVal) {
        if (this.chartObj) {
          if (newVal) {
            this.chartObj.setOption(newVal);
          } else {
            this.chartObj.setOption(oldVal);
          }
        } else {
          this.initChart();
        }
      },
      deep: true, //对象内部属性的监听，关键。
    },
    value: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
    },
  },
};
</script>

<style scoped lang="scss">
@import "style";
#customer-statistics {
  width: 100%;
  height: 300px;
}
.card-title-right {
  width: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  p {
    width: 100px;
    margin-left: 20px;
  }
  div {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
.line {
  display: inline-block;
  width: 20px;
}
.ml-20 {
  margin-left: 10px;
}
</style>
